<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Contact</title>
    <!-- web fonts -->
    
    <link href="http://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900&display=swap" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
    <!-- //web fonts -->
    <!-- Template CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath }/dist/assets/css/style-starter.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
    	#anniu{
    		height: 80px;
    	  width: 120px;
    	margin-top: -60px;
    	}
    	#footer{
    		bottom:0;
    	}
    	#daka{
    		width:100%;
    		height:600px;
    		text-align: center;
    		vertical-align: middle;
    	}
    	#clock-btn{
    		vertical-align: middle;
    		width: 250px;
    		font-size: 50px;
    		height: 250px;
    		border-radius:50%;
    		border: none;
    		position:relative;
    		top:80px;
    	}
    	#bgVideo{
				position: fixed;
				right: 0;
				bottom: 0;
				z-index: -1;
				min-height: 100%;
				min-width: 100%;
				width: auto;
				height: auto;
			}
		#video{
  			border-radius:100%;
  		}
  		#canvas{
  			border-radius:100%;
  			display:none;
  		}
    </style>
    <link href="${pageContext.request.contextPath }/dist/css/iconfont.css" rel="stylesheet" type="text/css" />
  </head>
  
  <body bgcolor="black">
<video id="bgVideo" loop="loop" autoplay="autoplay" muted >
	<source src="${pageContext.request.contextPath }/dist/video/clockBackground.mp4" />
</video>

<section class="w3l-bootstrap-header" >
  <nav class="navbar navbar-expand-lg navbar-light py-lg-3 py-2">
    <div class="container">
      <a class="navbar-brand" > 每日打卡</a>
		 <br>
		 <div>
		 <p class="text-white" id="workTime"></p>
		 <p class="text-white" id="clockTime"></p>
		 <p class="text-white" id="weizhi"></p>
		 </div>
                     
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon fa fa-bars"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="${pageContext.request.contextPath }/front/mysef.jsp">主界面</a>
          </li>
         <li class="nav-item">
			<a class="nav-link" href="${pageContext.request.contextPath }/front/services.jsp">查看请假条</a>
		</li>
          <li class="nav-item">
            <a class="nav-link" href="${pageContext.request.contextPath }/front/leave.jsp">请假申请</a>
          </li>
          
        
          <li class="nav-item">
            <a class="nav-link" href="${pageContext.request.contextPath }/front/puchclock.jsp">每日打卡</a>
          </li>
        </ul>
        
      </div>
    </div>
  </nav>
</section>
<section class="w3l-contact-breadcrum">
  <div class="breadcrum-bg">
    <div class="container py-5">
     </div>
  </div>
</section>
<!-- contact -->
<section class="w3l-contacts-12" id="contact"  >
    <div class="contact-top pt-5"  id="daka" >
    	<a data-toggle="modal" data-target="#myModal">
    		<input type="button" class="btn btn-primary" id="clock-btn" value="打卡">
    	</a>
	</div>
      
</section>
<!-- //contact -->
 
 <!-- grids block 5 -->
 <section class="w3l-footer-29-main" id="footer">
  <div class="footer-29 text-center">
      <div class="container">
        
        <div class="main-social-footer-29">
                    
          <a href="#facebook" class="facebook"><span class="fa fa-facebook"></span></a>
          <a href="#twitter" class="twitter"><span class="fa fa-twitter"></span></a>
          <a href="#instagram" class="instagram"><span class="fa fa-instagram"></span></a>
          <a href="#google-plus" class="google-plus"><span class="fa fa-google-plus"></span></a>
          <a href="#linkedin" class="linkedin"><span class="fa fa-linkedin"></span></a>
      </div>
          <div class="bottom-copies text-center">
              <p class="copy-footer-29">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
               
          </div>
      </div>
  </div>
   <!-- move top -->
  <button onclick="topFunction()" id="movetop" title="Go to top">
              <span class="fa fa-angle-up"></span>
                 </button>
   </section>
   
   <!-- 模态框 -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">人脸识别</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- 模态框主体 -->
      <div class="modal-body">
	   <video id="video" width="400" height="320" ></video>
  		<canvas id="canvas" width="400" height="320"></canvas>
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" id="capture" class="btn btn-primary" >拍照</button>
      </div>
 
    </div>
  </div>
</div>
</body>
<script src="${pageContext.request.contextPath }/dist/assets/js/jquery-3.3.1.min.js"></script>

<script>
    $(function () {
      $('.navbar-toggler').click(function () {
        $('body').toggleClass('noscroll');
      })
    });
  </script>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="${pageContext.request.contextPath }/dist/assets/js/jquery-3.4.1.slim.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="${pageContext.request.contextPath }/dist/assets/js/bootstrap.min.js"> </script>
  <!-- 调用摄像头 -->
  <script>
    //访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    }

    let video = document.getElementById('video');
     //根据id获取画布标签
    let canvas = document.getElementById('canvas');
    //创建画布对象
    let context = canvas.getContext('2d');

    function success(stream) {
      //兼容webkit核心浏览器
      let CompatibleURL = window.URL || window.webkitURL;
      //将视频流设置为video元素的源
      console.log(stream);

      //video.src = CompatibleURL.createObjectURL(stream);
      video.srcObject = stream;
      video.play();
    }

    function error(error) {
      console.log('访问用户媒体设备失败${error.name}, ${error.message}');
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
      //调用用户媒体设备, 访问摄像头  成功的话  调用success函数   否则回调error函数
      getUserMedia({video : {width: 400, height: 320}}, success, error);
    } else {
      alert('不支持访问用户媒体');
    }
    $(function(){
    	$('#capture').click(function(){
    		
    		context.drawImage(video, 0, 0, 400, 320);
    		$.post("${pageContext.request.contextPath}/FaceController",{image:context.canvas.toDataURL('image/png'),op:"search"},function(map){
    			var message = map.result;
    	    	  if(message.search("成功") != -1){
    	    		  $("#workTime").text(map.workTime);
    	    		  $("#clockTime").text(map.clockTime);
    	    		  $("#weizhi").html('<img  src="${pageContext.request.contextPath }/dist/img/weizhi.png" style="width:25px;heigh:25px"/>'+map.address);
    	    		  $("#clock-btn").css("display","none");
    	    		  $("#myModal").modal('hide');
    	    	  }else{
    	    		  alert(map.result);
    	    	  }
    	      },"json")
    	})
    	
    })
  </script>

</html>
